extends ./layout

append css
  link(rel='stylesheet', href='/components/toopay-bootstrap-markdown/css/bootstrap-markdown.min.css')
  link(rel='stylesheet', href='/components/editor.md/css/editormd.css')
append beforjs

  script(src='/components/editor.md/editormd.js')
  script(src='/components/editor.md/lib/marked.min.js')
  script(src='/components/editor.md/lib/prettify.min.js')
  script(src='/components/editor.md/lib/raphael.min.js')
  script(src='/components/editor.md/lib/underscore.min.js')
  script(src='/components/editor.md/lib/sequence-diagram.min.js')
  script(src='/components/editor.md/lib/flowchart.min.js')
  script(src='/components/editor.md/lib/jquery.flowchart.min.js')
  script(src='/components/toopay-bootstrap-markdown/js/bootstrap-markdown.js')
  script(src='/components/toopay-bootstrap-markdown/locale/bootstrap-markdown.zh.js')
  script(type="text/javascript", src='/js/jquery.toTop.js')

block contentAll
  a.to-top(style="cursor: pointer; position: fixed; right: 15px; bottom: 30px; display: inline;")
    i.fa.fa-arrow-circle-o-up.fa-4x
  script(type="text/javascript").
    $(()=>{
      $('.to-top').toTop();
    })

  .container
    ol.breadcrumb(style='margin:1em 0 1em;')
      span.glyphicon.glyphicon-home.myglyphicon
      |&nbsp;您当前的位置:&nbsp;
      li
        a(href="/") 首页
      li.active
        | 文章正文

block contentLeft
  .articleContent
    .contentList
      .page-header
        .article-header
          h2=article.title
          p.articleID.hidden=article.id
          p.articleSLUG.hidden=article.slug
      .articleinfo
        span.articleinfo-left
          span.article-created
            | &nbsp;&nbsp;
            i.fa.fa-clock-o &nbsp;
            =moment(article.created).format('YYYY-MM-DD HH:mm:ss')
            | &nbsp;&nbsp;
        span.articleinfo-right
          span.article-category
            i.fa.fa-file-code-o &nbsp;
            a(href="../category/"+article.category.name, target='_blank')
              =article.category.name
          span.article-meta
            i.fa.fa-comments-o &nbsp;&nbsp;
            span#comments-count
              =article.comments.length || 0
            | &nbsp;&nbsp;
          span.article-meta
            i.fa.fa-thumbs-up &nbsp;&nbsp;
            span#favorites-count
              =article.meta.favorites || 0
            | &nbsp;&nbsp;
          span.article-meta
            i.fa.fa-star &nbsp;&nbsp;
            span#collect-count
              =article.meta.collect.count || 0
            | &nbsp;&nbsp;
      .nofloat
      //-article-text
      div.article-text.markdown-body.editormd-html-preview#markdown-content
        textarea(style="display:none;")=article.content
      .article-bottom
        .article-mate-botton
          a.dofavorite(href='javascript:dofavorite()')
            i.fa.fa-thumbs-o-up.fa-2x
          a.docollect(href='javascript:docollect()')
            i.fa.fa-star-o.fa-2x
          script(type="text/javascript").
            function dofavorite(){
              var id = $('.articleID').text();
              var slug = $('.articleSLUG').text();
              if(id===null||id===''){
                id = slug;
              }
              $.ajax({
                url: './favorite/'+id,
                type: 'GET',
                success:function(msg){
                  $('#favorites-count').text(msg.nowFavorites);
                  //- console.log(msg);
                }
              })
            }
            function docollect(){
              var id = $('.articleID').text();
              var slug = $('.articleSLUG').text();
              var userID = $('#usernameID').text();
              console.log(userID);
              if(id === null||id===''){
                id = slug;
              }
              $.ajax({
                url: './collect',
                type: 'post',
                data:({
                  'id':id,
                  'username':userID
                }),
                success:function(msg){
                  if(!msg.status){
                    Swal({
                      title: '您已经收藏了，该文章！',
                      type: 'warning',
                    });
                  }else{
                    $('#collect-count').text(msg.nowCount);
                    Swal({
                      title: '您成功收藏了，该文章！',
                      type: 'success',
                    });
                  }
                  //- console.log(msg);
                }
              });
            }
          
        .bdsharebuttonbox
          a.bds_more(href='#', data-cmd='more') 分享到：
          a.bds_qzone(href='#', data-cmd='qzone', title='分享到QQ空间') QQ空间
          a.bds_tsina(href='#', data-cmd='tsina', title='分享到新浪微博') 新浪微博
          a.bds_tqq(href='#', data-cmd='tqq', title='分享到腾讯微博') 腾讯微博
          a.bds_renren(href='#', data-cmd='renren', title='分享到人人网') 人人网
          a.bds_weixin(href='#', data-cmd='weixin', title='分享到微信') 微信
        //- 分享js    
        script(type="text/javascript").
          window._bd_share_config={
            "common":{
              "bdSnsKey":{},
              "bdText":"",
              "bdMini":"2",
              "bdMiniList":false,
              "bdPic":"",
              "bdStyle":"1",
              "bdSize":"24"},
              "share":{"bdSize":16},
              "image":{
                "viewList":["qzone","tsina","tqq","renren","weixin"],
                "viewText":"分享到：",
                "viewSize":"24"
              },
              "selectShare":{
                "bdContainerClass":null,
                "bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]
              }
            };
          with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)] 

        .article-comments
          h3 用户评论 
          .article-comments-list
            if article.comments.length
              each comment in article.comments
                .article-comments-item
                  span.article-userinfo
                    img.img-circle.img-responsive(src='/img/userimages/' + comment.avatar +'.jpg')
                    | &nbsp;&nbsp;
                    =comment.username
                    | &nbsp;&nbsp;&nbsp;&nbsp
                    =moment(comment.commen_time).format('YYYY-MM-DD HH:mm:ss')
                    | &nbsp;&nbsp
                  //- h4.article-comments-username=comment.username
                  .article-comments-content!=markdown.toHTML(comment.content)    
            else
              p.alert.alert-info 该文章沙发还在，想对作者说点什么的快来坐上沙发。
            

          h3 添加评论
          if(user)      
            form.article-comments-form.form-horizontal(action='./comment/'+ article.id, enctype="multipart/form-data", method='post')
              .form-group(style='margin-bottom:0;')
                label.col-sm-1.control-label(for="inputuser")
                  //- 登录后修改
                  img.img-circle.img-responsive(src='/img/userimages/'+user.avatar)
                |     
                .col-sm-11
                  input.form-control#inputuser(type='hidden', name='username', value=user.username)
                  p.form-control-static=user.username
              |   
              .form-group(style='margin-bottom:0;') 
                .col-sm-12
                  label.control-label(for="editortext") 
                  textarea#editortext.form-control(name='editortext',data-provide="markdown")
              |   
              .article-comments-form-button
                button.btn.btn-default(type="submit") 我来说一句
          else
            p.alert.alert-info
              a(href='/user/login') 请登录后评论！ 



      //-.box(style='height:1000px;')



block contentRight
  .row
    .panel.panel-default.box.sides-hz-1.jquery-shadow-sides.jquery-shadow-sides-hz-1
      .panel-body(style='padding-top:0;')
        h3.panel-title(style='border-bottom:1px solid rgba(0, 0, 0, 0.05);padding:8px 0;margin:0 0 5px;')
          span.glyphicon.glyphicon-triangle-right.myglyphicon(aria-hidden="true", )
          | 作者信息
        .ul-article-content
          img.img-circle.img-responsive(src='/img/userimages/'+article.author.avatar)
          .ul.list-unstyled
            li &nbsp;&nbsp;用户名：
              =article.author.username
            li &nbsp;&nbsp;Email：
              =article.author.email
            li &nbsp;&nbsp;注册时间：
              =moment(article.author.created).format('YYYY-MM-DD')

    .panel.panel-default(style='border:0; box-shadow:3px 3px 15px -10px rgba(0, 0, 0, 0.9);')
      .panel-body(style='padding-top:0;')
        h3.panel-title(style='border-bottom:1px solid rgba(0, 0, 0, 0.05);padding:8px 0;margin:0 0 5px;')
          span.glyphicon.glyphicon-triangle-right.myglyphicon(aria-hidden="true", )
          | 文章分类
        .ulcontent
          .ul.list-unstyled
            each category in categories
              li
                a(href="../category/"+category.name)
                  =category.name
                  //- (style='border:0; box-shadow:3px 3px 15px -10px rgba(0, 0, 0, 0.9);')
      
    .panel.panel-default.box.sides-hz-1.jquery-shadow-sides.jquery-shadow-sides-hz-1
      .panel-body(style='padding-top:0;')
        h3.panel-title(style='border-bottom:1px solid rgba(0, 0, 0, 0.05);padding:8px 0;margin:0 0 5px;')
          span.glyphicon.glyphicon-triangle-right.myglyphicon(aria-hidden="true", )
          | 友情链接
        .ulcontent
          .ul.list-unstyled
            li
              a(href="#") 南宁学院
            li
              a(href="#") 信息工程学院
            li
              a(href="#") 计算机科学与技术
            li
              a(href="#") 14计科2班

block scriptsAfter
  //script(type="text/javascript", src="/components/summernote/dist/summernote.js") 
  script(type="text/javascript"). 
    var Editor;
    $(function () {
        Editor = editormd.markdownToHTML("markdown-content", {//注意：这里是上面DIV的id
            htmlDecode: "style,script,iframe",
            emoji: true,
            taskList: true,
            tex: true, // 默认不解析
            flowChart: true, // 默认不解析
            sequenceDiagram: true, // 默认不解析
            codeFold: true,
        });
        $("#editortext").markdown({autofocus:false,savable:false,language:'zh'});
    });






